<template>
    <el-container>
<!--        <el-header>-->
        <el-image :src="src" :fit="fit" style="height: 180px ;width: 770px;align-self: center;margin: 0px 0px 5px 0px" >
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
        <nav-component style="align-self: center;width: 770px"></nav-component>
<!--            <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0d73bd">-->
<!--                <tr>-->
<!--                    <td width="269"><img height="65" src="@/assets/img/pic_top_01.gif" width="269"></td>-->
<!--                    <td width="484" align="right"><font color="#000099"><img src="@/assets/img/044.gif" width="466" height="54">&nbsp;</font></td>-->
<!--                </tr>-->
<!--            </table>-->
<!--        </el-header>-->
        <el-main>
            <h3 style="display: inline">{{this.$route.query.nClass}}</h3>
            <p style="display: inline;margin-left: 600px"><a href="/" style="text-decoration: none;color: black">首页</a> > {{this.$route.query.nClass}}</p>
            <table width="760" border="0" cellspacing="0" cellpadding="0" align="center" height="1">
                <tr><td bgcolor="#CCCCCC"></td></tr>
            </table>
            <br>

            <div>
                <el-input placeholder="日期" v-model="searchData" clearable style="width: 200px;margin-right: 10px"></el-input>
                <el-button @click="filterData()" class="dalfBut" icon="el-icon-search">查询</el-button>
                <el-button @click="reset()" class="dalfBut" icon="el-icon-refresh">刷新</el-button>
            </div>

            <el-table
                    :data="fileList.filter(data => !search || data.createAt.toLowerCase().includes(search.toLowerCase()))"
                    stripe
                    style="width: 650px;margin: auto"
                    height="460px"
                    current-row-key="id">
                <el-table-column prop="title" width= "300" align="center">
                    <template slot-scope="scope">
                        <router-link :to="{name:'newsDetail',query:{title:scope.row.title,author:scope.row.author,date:scope.row.createAt,nClass:scope.row.module}}" style="text-decoration: none;color: black">
                            <a href="#" target="_blank" class="buttonText" style="text-decoration: none;color: black">{{scope.row.nTitle}}</a>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="nDate" width= "300" align="center"></el-table-column>
            </el-table>

            <!--分页组件-->
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </el-main>
        <el-footer>
            <table width="800" border="0" cellspacing="0" cellpadding="0" align="center" height="30">
                <tr>
                    <td bgcolor="#5E739D" valign="middle">
                        <div align="center">
                        <span>
                                <font color="#000000">
                                    <a href="/#/login"><font color="#66FF33">管理维护</font></a>
                                    &nbsp;©Copyright 2022-2023<b>&nbsp;上海局集团公司防洪办</b>&nbsp;all right reserved
                                </font>
                            </span>
                        </div>
                    </td>
                </tr>
            </table>
        </el-footer>
    </el-container>
</template>

<script>
import NavComponent from "../components/nav/Nav.vue"
    export default {
        name: "NewsComponent",
        components:{
            NavComponent
        },
        data() {
            return {
              //图片地址
              src:"https://s1.ax1x.com/2023/05/05/p9NYhJe.jpg",
                //文件信息
                fileList: [],
                //分页相关模型数据
                pagination: {
                    currentPage: 1,//当前页码
                    pageSize:10,//每页显示的记录数
                    total:0,//总记录数
                    // date: "",//查询条件""
                },
                search:"",
                searchData:""
            };
        },
        methods: {
            //获取所有文件
            getAll(){
                //拼接查询条件参数
              this.$axios.get("/article/article/articleSearchList?keyword="+this.$route.query.title).then((res)=>{
                // this.pagination.total = res.data.data.total;
                this.fileList = res.data.data;
              });
            },
            //切换页码
            handleCurrentChange(currentPage) {
                //修改页码值为当前选中的页码值
                this.pagination.currentPage = currentPage;
                //执行查询
                this.getAll();
            },
            filterData(){
                let a = this.searchData;
                this.search = a;
            },
            reset() {
                location.reload();
            },
        },
        mounted() {
            this.getAll();
        }
    }
</script>

<style scoped>

</style>
